
<template>
  <div :id="id" style="text-align: center; height: 250px; width: 450px"></div>
</template>

<script>
import * as echarts from "echarts/lib/echarts.js";
export default {
  name: "FunnelChart",
  props: {
    chartData: {
      type: Array,
    },
    id: {
      type: String,
      default: "chart",
    },
  },
  //     query: {
  //       type: Object,
  //       default: function () {
  //         return {}
  //       }
  //     }
  //   },

  data() {
    return {
      chart: null,
      // dataList: [],
      funnelDateList: "",
    };
  },
  watch: {
    chartData: {
      //获取需要显示的数据
      handler: function (newVal, oldVal) {
        console.log(JSON.stringify("chartData", newVal));
        this.init();
      },
      deep: true,
    },
  },
  created() {
    /** 访客数 */
    // @Excel(name =“访客数”)
    // private Integer visitors;
    // private Double visitorsYoy;
    // /** 收藏加购人数 */
    // @Excel(name ="收藏加购人数"
    // private Integer collectAddPurchasesPeoNum
    // private Double collectAddPurchasesPeoNumY
    // /** 收藏加购人数 *!
    // @Excel(name ="加购人数")
    // private Integer addPurchasesPeoNum;
    // private Double addPurchasesPeoNumYoy;
    // /** 收藏加购率 */
    // @Excel(name ="收藏加购率"
    // private Integer collectAddPurchasesRate:
    // /** 加购率 */
    // @Excel(name =“加购率")
    // private Integer addPurchasesRate;
    // /** 支付买家数 */
    // @Excel(name =“支付买家数")
    // private Integer payBuyers;
    // private Double payBuyersYoy;
    // /** 支付转化率 */
    // @Excel(name =支付转化率")
    // private Double payConversionRate;
    // this.elId = uuidv1(); //
    // this.dataList = [
    //   { value: 44, name: "易制毒", num: 44, l: 16.123, kg: 5.521 },
    //   { value: 39, name: "易制爆", num: 39, l: 12.321, kg: 4.254 },
    //   { value: 33, name: "剧毒", num: 33, l: 10.254, kg: 4.012 },
    //   //   { value: 27, name: "爆炸", num: 27, l: 9.213, kg: 3.654 },
    //   //   { value: 14, name: "精麻品", num: 14, l: 8.214, kg: 3.218 },
    // ];
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    init() {
      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}万",
        },
        labelLine: {
          show: true,
        },
        series: [
          {
            name: "漏斗",
            type: "funnel",
            top: 10,
            bottom: 10,
            // left: -10,
            width: "60%",
            height: "80%",
            min: 0,
            max: 100,
            minSize: "50%",
            maxSize: "100%",
            sort: "descending",
            gap: 0,
            color: ["#705CFB", "#687799", "#56DFA9", "#5B8EF9"],

            label: {
              //设置字体放在漏斗内部
              position: "inside",
              formatter: function (params) {
                return (
                  // "支: " +
                  params.data.name +
                  "\n" +
                  // "微: " +
                  params.data.value +
                  "万" +
                  "\n" +
                  "同比: " +
                  params.data.yoy +
                  "%"
                );
              },
              color: "#fff",
              fontStyle: "normal",
              textBorderColor: "#fff", //边框
            },
            // data: this.dataRight,
            data: this.chartData,
          },
          {
            name: "漏斗", //名字
            type: "funnel", //echarts类型
            top: 10,
            bottom: 10,
            // left: -60, // 距左侧的距离
            width: "60%", //宽
            height: "80%", //高
            min: 0, //
            max: 100,
            minSize: "35%", //漏斗最小值的宽度
            maxSize: "100%", //漏斗最大值的宽度
            sort: "descending", // 金字塔形:'ascending', 漏斗图形:'descending'
            gap: 0, //图例之间的间隔
            color: ["#705CFB", "#687799", "#56DFA9", "#5B8EF9"],
            label: {
              //漏斗外部显示的
              position: "right", //位置
              formatter: function (params) {
                return (
                  params.data.twoname +
                  "\n" +
                  // params.data.value +
                  "(" +
                  params.data.twoyoy +
                  ")%"
                );
              },
              // fontStyle: 'normal',
              // textBorderColor: '#fff',
            },
            itemStyle: {
              opacity: 1, //图形透明度
              borderColor: "#fff", //图形边框颜色
              borderWidth: 0, //图形边框宽度
            },
            data: this.chartData,
            // z: 100,
          },
        ],
      };

      this.chart = echarts.init(document.getElementById(this.id));

      // Raddar.setOption(option);
      this.chart.setOption(option);
    },
  },
};
</script>
